<template>
  <div class="box">
      <!-- Node -->
      <div class="node" v-for="item in node" :key="item.index">
        <a href="javascript:;">
          <!-- 图片 -->
          <div class="img">
              <router-link :to="'/detail/'+item.nodeId">
                  <img v-if="item.nodeImages.length>1" :src="item.nodeImages" width="100%" height="100%" alt="">
                    <p v-else style="text-align:center;line-height:250px">文案</p>
             </router-link>
          </div>
          <!-- 作者 -->
          <div class="auther">
              <div class="header">
              </div>
              <div class="autherName">
                 <p style="font-size:10px">热度：{{item.nodeLook}}</p>
              </div>
          </div>
        </a>
      </div>
      
  </div>
</template>

<script>
export default {
    props:["node"]
}
</script>

<style scoped lang="less">
    .box{
        width: 100%;
        height: auto;
        padding: 10px;
        background: #fff;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        
        .node{
            border: 1px solid #e0e0e0;
            margin-top: 10px;
            margin-right: 10px;
            width: 23%;
            height: 250px;
            .img{
                width: 100%;
                height: 200px;
                padding: 10px 20px 10px 20px;
            }
            .auther{
                width: 100%;
                height: 50px;
                position: relative;
                display: flex;
                .header{
                    width: 50%;
                    height: 100%;
                    padding: 8px;
                    position: relative;
                }
                .autherName{
                    width: 50%;
                    height: 100%;
                    padding-right: 10px;
                    p{
                        line-height: 70px;
                        text-align: right;
                    }
                }
            }
        }
    }


     @media  screen and (max-width: 1300px) {
         .box{
             display: block !important;
             .node{
                 width: 70% !important;
            margin: 10px auto;

             }
         }
     }
</style>